<template>
	<view class="content-dept-detail">
		<view class="title">
			普外科
		</view>
		<view class="back" @click="back">
			{{`< 返回`}}
		</view>
		<view class="detail-title">
			<view class="detail-title-tex"><text class="main-color">科室</text>简介</view>
			<view class="detail-title-border">
				<view class="detail-title-border-left"></view>
				<view class="detail-title-border-right"></view>
			</view>
		</view>
		<view class="dept-introduction">
			<image src="@/static/logo/dept.jpg" class="dept-img"></image>
			<view class="dept-info">
				<view class="dept-time">
					科室时间：早八点-晚六点
				</view>
				<view class="dept-time">
					科室时间：早八点-晚六点
				</view>
				<view class="dept-text">
					科室基本介绍，代文字代文字代文字代文字科室基本介绍，代文字代文字代文字代文字科室基本介绍，代文字代文字代文字代文字科室基本介绍，代文字代文字代文字代文字。
				</view>
			</view>
		</view>
		<view class="detail-title">
			<view class="detail-title-tex"><text class="main-color">科室</text>专家</view>
			<view class="detail-title-border">
				<view class="detail-title-border-left"></view>
				<view class="detail-title-border-right"></view>
			</view>
		</view>
		<scroll-view class="dept-expert" scroll-x="true" scroll-with-animation="true">
			<view class="dept-expert-flex">
				<view class="dept-expert-item" v-for="(item, index) in expertList" :key="index"
					@click="toExpertDetail(item)">
					<image src="/static/index/expert/doctor.jpeg" class="expert-img"></image>
					<view class="expert-name">医生姓名</view>
					<view class="expert-name1">职称 职务内容</view>
					<view class="expert-name1 text-overflow-2">
						成就及相关简介成就及相关简介成就及相关简介成就及相关简介成就及相关简介成就及相关简介成就及相关简介成就及相关简介成就及相关简介成就及相关简介</view>
				</view>
			</view>

		</scroll-view>
		<view class="detail-title">
			<view class="detail-title-tex"><text class="main-color">科室</text>特色</view>
			<view class="detail-title-border">
				<view class="detail-title-border-left"></view>
				<view class="detail-title-border-right"></view>
			</view>
		</view>
		<view class="dept-feature">
			创伤性疾病：如骨折（四肢骨折、脊柱骨折、骨盆骨折等）、关节脱位（肩关节脱位、肘关节脱位、髋关节脱位等）以及软组织损伤（肌肉拉伤、肌腱损伤、韧带损伤等）。治疗方法包括手法复位、固定、手术切开复位内固定等。
			脊柱疾病：如颈椎病、腰椎间盘突出症、脊柱侧弯、脊柱骨折等。治疗方法包括保守治疗（牵引、按摩、理疗、药物治疗等）和手术治疗（颈椎前路或后路手术、椎间盘切除术、椎间融合术等）。
			关节疾病：如骨关节炎、类风湿关节炎、股骨头坏死等。治疗方法包括药物治疗、物理治疗、关节腔内注射以及关节置换手术等。
			骨肿瘤：包括良性骨肿瘤（如骨软骨瘤、骨囊肿、骨巨细胞瘤等）和恶性骨肿瘤（如骨肉瘤、软骨肉瘤、尤文肉瘤等）。治疗通常包括手术、化疗、放疗等综合治疗方案。
		</view>
	</view>
</template>

<script>
	import {
		getDeptExpertByDept,
	} from "@/common/api.js";
	export default {
		data() {
			return {
				expertList: [],
				deptId: '',
				detailInfo: {}
			}
		},
		mounted() {
			// this.$refs.scrollView.addEventListener('mousewheel', this.handleMouseWheel)	
		},
		onLoad(option) {
			this.getInfo(option.id)
		},
		methods: {
			getInfo(id) {
				this.deptId = id
				getDeptExpertByDept({
					deptId: id
				}).then(res => {
					this.expertList = res.data
				})
			},
			handleMouseWheel(event) {
				console.log(event)
			},
			back() {
				uni.navigateBack()
			},
			toExpertDetail(item) {
				uni.navigateTo({
					url: '/pages/expert-detail'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-dept-detail {
		position: relative;

		.title {
			width: 100%;
			font-weight: 500;
			text-align: center;
			line-height: 80px;
			font-size: 24px;
			color: $maincolor;
		}

		.back {
			position: absolute;
			top: 20px;
			left: 0;
			color: $maincolor;
			cursor: pointer;
		}

		.detail-title {

			.detail-title-tex {
				font-weight: 500;
				font-size: 20px;
				color: #434343;
				line-height: 27px;
			}

			.detail-title-border {
				display: flex;
				margin-top: 4px;

				.detail-title-border-left {
					width: 40px;
					height: 1px;
					background: #193F93;
				}

				.detail-title-border-right {
					width: 20px;
					height: 1px;
					background: #DCB67E;
				}
			}
		}

		.dept-introduction {
			margin-top: 20px;
			display: flex;
			margin-bottom: 20px;

			.dept-img {
				width: 320px;
				height: 240px;
			}

			.dept-info {
				flex: 1;
				padding-left: 20px;

				.dept-time {
					font-weight: 400;
					font-size: 14px;
					color: #434343;
					line-height: 19px;
					margin-bottom: 10px;
				}

				.dept-text {
					font-weight: 400;
					font-size: 14px;
					color: #434343;
					line-height: 19px;
				}
			}
		}

		// .dept-expert::-webkit-scrollbar {
		// 	display: block;
		// 	width: 10px;
		// 	height: 10px;
		// }

		.dept-expert {
			padding-top: 20px;
			width: 864px;
			margin-bottom: 40px;
			white-space: nowrap;

			.dept-expert-flex {
				display: flex;
			}


			.dept-expert-item {
				cursor: pointer;
				display: inline-block;
				width: 216px;
				margin-right: 20px;

				.expert-img {
					width: 216px;
					height: 318px;
					margin-bottom: 8px;
				}

				.expert-name {
					font-weight: 400;
					font-size: 14px;
					color: #434343;
					line-height: 19px;
					margin-bottom: 8px;
				}

				.expert-name1 {
					font-weight: 400;
					font-size: 12px;
					color: #686868;
					line-height: 16px;
					margin-bottom: 4px;
					white-space: pre-wrap;
				}
			}
		}

		.dept-feature {
			padding-top: 25px;
			font-weight: 400;
			font-size: 14px;
			color: #434343;
			line-height: 19px;
		}
	}
</style>